<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!--头部区域-->
    <div class="header">
        <div class="logo">
            <img src="images/logo.png" alt="logo.png">
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="">HOME</a>
                </li>
                <li>
                    <a href="">ABOUT</a>
                </li>
                <li>
                    <a href="">GALLERY</a>
                </li>
                <li>
                    <a href="">FACULTY</a>
                </li>
                <li>
                    <a href="">CONTACT</a>
                </li>
            </ul>
            <!--<div class="clear"></div>-->
        </div>
    </div>
    <!--banner区域-->
    <div class="banner">
        <!--图片-->
        <div class="top">
            <img src="images/banner3.jpg" alt="banner3.jpg">
        </div>
        <!--遮罩层-->
        <div class="topplayer"></div>
        <div class="clear"></div>
        <div class="allipt">
            <form action="">
                <input class="ipt1" type="text" maxlength="37" placeholder="your Name"><br>
                <input class="ipt1" type="text" placeholder="your Phone"><br>
                <input class="ipt1" type="text" placeholder="your Email"><br>
                <textarea>Write Your Comment Here</textarea><br>
                <button class="submit" type="submit">SEND MESSAGE</button>
            </form>
        </div>
    </div>
    <div class="clear"></div>
    <!--about区域-->
    <div class="about">
        <div class="maxA">
            <div class="area1">ABOUT</div>
            <div class="line"></div>
            <div class="area2">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
                <p>industry.Lorem Ipsum has been the industry's standerd dummy</p>
                <p>text even since the 1500s.</p>
            </div>
        </div>
        <div class="middle">
            <div class="pic">
                <img src="images/bb3.jpg" alt="bb3.jpg">
            </div>
            <div class="tit">A WORD ABOUT US</div>
            <div class="backgronud"></div>
            <div class="text">
                    <p>Praesent dignissim viverra est.sed</p>
                    <p>bibendum ligula congue non.Sed ac nisl</p>
                    <p>et felis gravida commodo? Suspendisse</p>
                    <p>eget ullamcorper ipsum. Suspendisse</p>
                    <p>diam amet.</p>
                    <button>EXPLORE</button>
            </div>
            <div class="students">
                70000
                <div class="line"></div>
                <span> Students </span>
            </div>
            <div class="faculty">
                600
                <div class="line"></div>
                <span> Faculty </span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="m-bottom">
            <div class="img"><img src="images/b1.jpg"/></div>
            <div class="list">
                <ul>
                    <li class="li1">Library</li>
                    <li class="li2">Lorem Ipsum is simply dummy text of the printing and typesettingindustry</li>
                    <li class="li3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow
                        printer took a galley of type and scrambied it to make a type specimen book.</li>
                </ul>
                <button>EXPLORE</button>
            </div>
            <div class="img"><img src="images/b2.jpg"/></div>
            <div class="list">
                <ul>
                    <li class="li1">Computer Lab</li>
                    <li class="li2">Lorem Ipsum is simply dummy text of the printing and typesettingindustry</li>
                    <li class="li3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow
                        printer took a galley of type and scrambied it to make a type specimen book.</li>
                </ul>
                <button>EXPLORE</button>
            </div>
            <div class="list">
                <ul>
                    <li class="li1">Conference Hall</li>
                    <li class="li2">Lorem Ipsum is simply dummy text of the printing and typesettingindustry</li>
                    <li class="li3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow
                        printer took a galley of type and scrambied it to make a type specimen book.</li>
                </ul>
                <button>EXPLORE</button>
            </div>
            <div class="img"><img src="images/b3.jpg"/></div>
            <div class="list">
                <ul>
                    <li class="li1">Play Ground</li>
                    <li class="li2">Lorem Ipsum is simply dummy text of the printing and typesettingindustry</li>
                    <li class="li3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow
                        printer took a galley of type and scrambied it to make a type specimen book.</li>
                </ul>
                <button>EXPLORE</button>
            </div>
            <div class="img"><img src="images/b4.jpg" /></div>
        </div>
    </div>
    <div class="clear"></div>
    <!--gallery区域-->
    <div class="gallery">
        <div class="maxA">
            <div class="area1">GALLERY</div>
            <div class="line"></div>
            <div class="area2">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
                <p>industry.Lorem Ipsum has been the industry's standerd dummy</p>
                <p>text even since the 1500s.</p>
            </div>
        </div>
        <div class="clear"></div>
        <div class="bot-gallery">
            <!--<div class="list1">-->
                <dl class="image img1">
                    <dt><img src="images/03-01.jpg" alt="03-01.jpg"></dt>
                    <dd class="dis dis1">Life is like a book</dd>
                </dl>
                <dl class="image img2">
                    <dt><img src="images/03-02.jpg" alt="03-02.jpg"></dt>
                    <dd class="dis dis1">Life is like a book</dd>
                </dl>
                <dl class="image img3">
                    <dt><img src="images/03-03.jpg" alt="03-03.jpg"></dt>
                    <dd class="dis dis1">Life is like a book</dd>
                </dl>
            <!--</div>-->
            <!--<div class="list2">-->
                <dl class="image img4">
                    <dt><img src="images/03-04.jpg" alt="03-04.jpg"></dt>
                    <dd class="dis dis1">Life is like a book</dd>
                </dl>
                <dl class="image img5">
                    <dt><img src="images/03-05.jpg" alt="03-05.jpg"></dt>
                    <dd class="dis dis1">Life is like a book</dd>
                </dl>
                <dl class="image img6">
                    <dt><img src="images/03-06.jpg" alt="03-06.jpg"></dt>
                    <dd class="dis dis1">Life is like a book</dd>
                </dl>
            <!--</div>-->
        </div>
    </div>
    <div class="clear"></div>
    <!--页脚区域-->
    <div class="bottom">
        © 2016 imooc.com  京ICP备13046642号
    </div>

</body>
</html>